<template>
	<view class="index">
		<view class="page">
			<image class="image" src="/static/logo_text.png" mode="aspectFit"></image>
			<text style="position: absolute;bottom: 10rpx;color: #eeeeee;font-size: 28rpx;">@Created:DaiJiaPeng</text>
		</view>
		<view class="bar">
			<view class="skip">
				<view class="num">{{time}}</view>
				<view class="buttom" @click="skip">跳过</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				time:5,
				interval:{}
			};
		},
		//当界面出现时启动倒计时
		onShow() {
			this.interval = setInterval(()=>{
				if((this.time-1)==0){
					this.nav()
				}
				this.time--
			},1000)
		},
		methods:{
			skip(){
				this.nav()
			},
			//页面跳转事件
			nav(){
				clearInterval(this.interval)
				if(this.$getNowUser()==""){
					//如果用户未登录，则跳转至登录页
					uni.redirectTo({
						url:"/pages/login/login"
					})
				}else{
					//如果用户已登录，则跳转至首页
					uni.switchTab({
						url:"/pages/tabber/shop/shop"
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	page{
		height: 100%
	}
	.index{
		display: flex;
		height: 100%;
		flex-direction: column;
		.page{
			width: 750rpx;
			height: 90%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			background-color: $my-main-color;
			position: relative;
			
				.image{
					height: 800rpx;
					position: relative;
					top: -200rpx;
				}
			
		}
		
		.bar{
			width: 750rpx;
			position: relative;
			display: flex;
			height: 10%;
			flex-direction: row;
			align-items: center;
			flex-grow: 1;
			.skip{
				position: absolute;
				//border: 2rpx solid #ccc;
				box-shadow:5rpx 5rpx 20rpx #e3e3e3;
				height: 70rpx;
				width: 200rpx;
				border-radius: 50rpx;
				right: 20rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				
				.num{
					flex-grow: 1;
					margin-left: 25rpx;
					border-right: 2rpx solid #e3e3e3;
					font-size: 32rpx;
					color: #595b71;
				}
				.buttom{
					flex-grow: 2;
					margin-left: 25rpx;
					font-size: 36rpx;
					color: #595b71;
				}
			}
		}
	}
	
	
</style>
